<template>
  <div class="header">
        <div class="content-wrapper">
            <div class="avatar">
                <img width="64" height="64" :src="seller.avatar" />
            </div>
            <div class="content">
                <div class="title">
                    <span class="brand"></span>
                    <span class="name">{{seller.name}}</span>
                </div>
                <div class="description">
                   {{seller.description}}/{{seller.deliveryTime}}分钟送达
                </div>
                <div class="support" v-if="seller.supports">
                    <span class="icon"></span>
                    <span class="text">{{seller.supports[0].description}}</span>
                </div>
            </div>
            <div v-if="seller.supports" class="support-content" @click="showDetail">
                <span class="count">{{seller.supports.length}}个</span>
                <i class="icon-keyboard_arrow_right"></i>
            </div>
        </div>
        <div class="bulletin-wrapper" @click="showDetail">
            <span class="bulletin-title"></span>
            <span class="bulletin-text">{{seller.bulletin}}</span>
            <i class="icon-keyboard_arrow_right"></i>
        </div>
        <div class="background">
            <img :src="seller.avatar" width="100%" height="100%">
        </div>
        <transition>
            <div class="detail" v-show="detailShow" transition="fade">
                <div class="detail-wrapper">
                    <div class="detail-main">
                        <h1 class="name">{{ seller.name }}</h1>
                        <div class="star-wrapper">
                            <star :size="36" :score="seller.score"></star>
                        </div>
                        <!--flex 布局-->
                        <div class="title">
                            <div class="line"></div>
                            <div class="text">优惠信息</div>
                            <div class="line"></div>
                        </div>
                        <ul class="supports"  v-if="seller.supports">
                            <li v-for="(item,index) in seller.supports" class="support-item">
                                <span class="icon" :class="classMap[seller.supports[index].type]"></span>
                                <span class="text">{{seller.supports[index].description}}</span>
                            </li>
                        </ul>
                        <div class="title">
                            <div class="line"></div>
                            <div class="text">商家公告</div>
                            <div class="line"></div>
                        </div>
                        <div class="bulletin">
                            <p class="content">{{seller.bulletin}}</p>
                        </div>
                    </div>
                </div>
                <div class="detail-close" @click="hideDetail">
                    <i class="icon-close"></i>
                </div>
            </div>
        </transition>
        
    </div>
</template>

<script>
	
  import star from '../star/star'
  export default {
  	props:{
  		seller: {}
  	},
	data () {
		return {
			detailShow:false
		}
	},
	created(){
		this.classMap=['decrease', 'discount', 'special', 'invoice', 'guarantee'];
	},
	methods:{
		showDetail(){
			//console.log(0);
			this.detailShow=true;
		},
		hideDetail(){
			this.detailShow=false;
		}
	},
	components:{
		star
	}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	
	.header{ position: relative; color: #fff; background: rgba(7, 17, 27, 0.5); overflow: hidden;}
	.content-wrapper{position: relative;  font-size: 0;}
	.avatar{margin:24px 16px 18px 24px;}
	.avatar img{border-radius: 2px}
	.avatar,.content{display: inline-block; font-size: 14px;}
	.brand{display: inline-block; width: 30px; height: 18px; background-image: url(images/brand@2x.png); background-size: 30px 18px;vertical-align: top;}
	.support{}
	.support .icon{margin-right: 4px; display: inline-block; width:14px; height: 14px; background-image: url(images/decrease_1@2x.png); background-size: 14px 14px; vertical-align: top;}
	.support .text{ font-size: 12px; line-height: 14px; }
	.title{ margin: 2px 0 8px 0;}
	.name { margin-left: 6px; font-size: 16px; line-height: 18px; font-weight: bold; }
	.description{ margin:8px 0 10px 0; font-size: 12px;}
	.support-content{position: absolute; padding: 0 8px; height:24px; line-height: 24px; background-color: rgba(0,0,0,.2); border-radius: 14px;  font-size: 10px;  right: 12px; bottom: 10px;}
	.support-content .icon-keyboard_arrow_right{margin-left: 2px; line-height: 24px; font-size: 10px;}
	
	.bulletin-wrapper{position: relative; height: 28px; line-height: 28px; padding: 0 22px 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;background-color: rgba(7,17,27,.2)}
	.bulletin-title {
	    display: inline-block;
	    vertical-align: top;
	    margin-top: 8px;
	    width: 22px;
	    height: 12px;
	    background-image: url(images/bulletin@2x.png);
	    background-size: 22px 12px;
	    background-repeat: no-repeat;
	}
	.bulletin-text {
	    vertical-align: middle;
	    margin: 0 4px;
	    font-size: 10px;
	}
	.bulletin-wrapper .icon-keyboard_arrow_right {
	    position: absolute;
	    font-size: 10px;
	    right: 5px;
	    top: 1 ;}
	.background{
		position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            filter: blur(10px);
	}
	.detail{position: fixed;top:0; left: 0;width: 100%; height: 100%; overflow: auto; background-color: rgba(7,17,27,.8);z-index: 99; transition: all 0.5s;}
    .detail.fade-transition{opacity: 1; background-color: rgba(0,0,0,.8)}
    .detail.fade-enter,.detail.fade-leave{opacity: 0; background-color: rgba(0,0,0,0)}
	
    .detail-wrapper{ width: 100%; min-height: 100%; padding-bottom: 20px; box-sizing:border-box;}
	.detail-main{ padding: 50px 36px 0;}
	.detail-main .name{ font-size: 16px; font-weight: 700; text-align: center;}
	.star-wrapper{ margin: 12px 0 22px;text-align: center;}
	.detail-main .title{ display: flex; margin: 20px 0 20px;}
	.detail-main .title .line{ flex: 1; border-bottom: 1px solid rgba(255,255,255,.2); position: relative; top:-.5em;}
	.detail-main .title .text{padding: 0 12px; font-weight: 700; }
	.detail-main .supports{font-size: 12px; padding: 0 12px;}
	.detail-main .supports .support-item{margin-bottom: 12px;}
    .detail-main .supports .icon{display: inline-block; vertical-align: top; width: 12px; height: 12px; margin-right: 4px; background-size: 12px 12px; background-repeat: no-repeat;}
    .detail-main .supports .icon.decrease{background-image:url('images/decrease_1@2x.png');}
    .detail-main .supports .icon.discount {background-image:url('images/discount_1@2x.png');}
    .detail-main .supports .icon.guarantee {background-image:url('images/guarantee_1@2x.png');}
    .detail-main .supports .icon.invoice {background-image:url('images/invoice_1@2x.png');}
    .detail-main .supports .icon.special {background-image:url('images/special_1@2x.png'); }
	.detail-main .bulletin .content{ font-size: 12px; line-height: 2em; }
	.detail-close{position: relative;width: 32px;height: 32px; margin: -64px auto 0; font-size: 32px;}
	

</style>
